<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
<head>
<base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no">
  <title>支付详情</title>
  <script id="time" data-time="${time}"></script>
  <script>
  var time = document.querySelector("#time").dataset.time
  var now = Date.now()
  if(now-time>2000){
    location.reload()
  }
  </script>
  <script src="static/js/lib/cssrem.js"></script>
  <link href="static/css/style.css" rel="stylesheet">
  
</head>

<body>
  <div class="content">
    <div class="wrapper">
      <!-- 支付信息 -->
      <div class="pay-detail bgwh pt20">
        <dl class="pl20 pr20 mt10">
          <dt class="pay-firm f0 tc"><i class="icon-01 dib vm mr10"></i><span class="dib vm f28">北京亿通贸科技有限公司</span></dt>
          <dd class="pay-money mt20 tc">${tf.totalPrice }</dd>
          <dd class="pay-status tc f26 g9 mt10 mb20 pb10">
          <c:if test="${tf.type != 'refund' }"><c:if test="${tf.state == '00' }">待付款</c:if><c:if test="${tf.state == '01' }">已付款</c:if><c:if test="${tf.state == '02' }">已取消</c:if></c:if>
          <c:if test="${tf.type == 'refund' }"><c:if test="${tf.state == '00' }">未退款</c:if><c:if test="${tf.state == '01' }">已退款</c:if><c:if test="${tf.state == '02' }">已取消</c:if></c:if>
          </dd>
          <dd class="clearfix f28 mt20"> <span class="l g9">汇付识别码:</span> <span class="r text-danger">${tf.remittanceCode }</span> </dd>
          <dd class="clearfix f28 mt20">
          <span class="l g9">支付类型:</span> <span class="r g6"><c:if test="${tf.type == 'consume' }">消费</c:if><c:if test="${tf.type == 'refund' }">退款</c:if><c:if test="${tf.type == 'recharge' }">充值</c:if></span> </dd>
          <dd class="clearfix f28 mt20"> <span class="l g9">交易流水号:</span> <span class="r g6">${tf.codePre }${tf.id }${tf.codeSuf }</span> </dd>
          <dd class="clearfix f28 mt20"> <span class="l g9">支付完成时间:</span> <span class="r g6"><c:if test="${tf.state == '01' }">${tf.finishTime }</c:if><c:if test="${tf.state != '01' }">未完成</c:if></span> </dd>
          <c:if test="${tf.state != '01' }">
            <dd class="addto-proof tc"><a class="rel db f0" href="<%=basePath%>wap/transaction/toProof?id=${tf.id }"><i class="icon-03 dib vm mr20"></i> <span class="dib vm f30">添加支付凭证</span></a></dd>
          </c:if>
        </dl>
      </div>
      <div class="pay-proof pb20">
        <ul>
          <c:forEach items="${tbf}" var="t" varStatus="vs">
          <li class="pay-proof-item bgwh">
            <div class="pay-proof__title f0 g6 rel"> <i class="icon-02 dib vm mr10"></i><span class="dib vm f28">支付凭证</span> </div>
            <dl class="rel f24 proof">
              <dt class="proof-photo" data-src="${t.instrument }"></dt>
              <dd>
                <p><span class="g9">打款金额：</span><span class="g6">¥${t.price }</span></p>
                <p class=""><span class="g9">银行流水：</span><span class="g6">${t.bankFlow }</span></p>
                <p class=""><span class="g9">支付时间：</span><span class="g6">${t.createTime }</span></p>
              </dd>
            </dl>
          </li>
          </c:forEach>
        </ul>
      </div>
    </div>
  </div>
  <!-- Root element of PhotoSwipe. Must have class pswp. -->
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
      <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
      </div>
      <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">
          <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share"
            title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
          <button
            class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
        </div>
        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
          <div class="pswp__share-tooltip"></div>
        </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
        <div class="pswp__caption">
          <div class="pswp__caption__center"></div>
        </div>
      </div>
    </div>
  </div>
  <link href="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/photoswipe/4.1.2/default-skin/default-skin.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.js"></script>
  <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
  <script type="text/javascript" src="static/js/lib/vendor.js"></script>
  <script type="text/javascript" src="static/js/lib/app.js"></script>
  <script type="text/javascript" src="static/js/lib/layer_mobile/layer.js"></script>
  </body>
</html>
